import { Link, FileAdded } from '@brillout/docpress'

Your `.telefunc.js` files should only export functions:

```ts
// components/NewsletterForm.telefunc.ts

// ✅ Exporting a function
export async function onNewSubscription(email: string) {
  if (isValidEmail.test(email)) return { invalidEmail: true }
  /* ... */
}

// ❌ Non-function export
export const isValidEmail = /^\S+@\S+\.\S+$/
```

## Why

The idea of `.telefunc.js` files is to be a simple (and minimal!) bridge between the frontend and backend — nothing more, nothing less.

> See <Link href="/event-based" /> which explains how to efficiently use Telefunc.

Thus, we recommend against defining other kinds of logic inside them, as it conflates the purpose of `.telefunc.js` files, making your code harder to understand and maintain.


## Solution

Move non-function exports outside your `.telefunc.js` file:

```ts
// components/NewsletterForm.telefunc.ts

// @detype-replace isValidEmail2 isValidEmail
import { isValidEmail2 } from './NewsletterForm/validation'// [!code ++]

export async function onNewSubscription(email: string) {
  if (isValidEmail.test(email)) return { invalidEmail: true }
  /* ... */
}

export const isValidEmail = /^\S+@\S+\.\S+$/// [!code --]
```

<FileAdded>
```ts
// components/NewsletterForm/validation.ts

export const isValidEmail = /^\S+@\S+\.\S+$/
```
</FileAdded>


## See also

<Link href="/event-based" />
